import { createGlobalState } from "@vueuse/core";

export type ActiveNavType = "home" | "about" | "pricing" | "team" | "contact";

export const useAppHeaderNav = createGlobalState(() => {
  const home = ref<HTMLElement | null>(null);
  const about = ref<HTMLElement | null>(null);
  const pricing = ref<HTMLElement | null>(null);
  const team = ref<HTMLElement | null>(null);
  const contact = ref<HTMLElement | null>(null);
  const navs: Record<ActiveNavType, Ref<HTMLElement | null>> = {
    home,
    about,
    pricing,
    team,
    contact,
  };

  const activeNav = ref<ActiveNavType>("home");

  const smooth = (nav: ActiveNavType) => {
    activeNav.value = nav;
    navs[nav].value!.scrollIntoView({
      behavior: "smooth",
    });
  };

  return { activeNav, navs, home, about, pricing, team, contact, smooth };
});
